import { lazy } from "react";
import { RouteConfig } from "./type";

// 懒加载组件
const Home = lazy(() => import("../pages/Home"));
const Login = lazy(() => import("../pages/Login"));
const Dashboard = lazy(() => import("../pages/Dashboard"));
const Profile = lazy(() => import("../pages/Profile"));
const Settings = lazy(() => import("../pages/Settings"));
const NotFound = lazy(() => import("../pages/NotFound"));

const routes: RouteConfig[] = [
  {
    path: "/login",
    element: <Login/>,
    requiresAuth: false
  },
  {
    path: "/",
    element: <Home/>,
    requiresAuth: false,
    // loader: async () => {
    //   const res = await fetch('/api/home-data');
    //   if (!res.ok) throw new Error('Failed to load home data');
    //   return res.json();
    // },
    children: [
      {
        path: "dashboard",
        element: <Dashboard/>,
        requiresAuth: true,
        roles: ["admin", "editor"],
        // loader: async () => {
        //   const res = await fetch('/api/dashboard-data');
        //   if (!res.ok) throw new Error('Failed to load dashboard data');
        //   return res.json();
        // }
      },
      {
        path: "profile",
        element: <Profile/>,
        requiresAuth: true,
        roles: ["admin", "editor", "viewer"],
        // loader: async () => {
        //   const res = await fetch('/api/user-profile');
        //   if (!res.ok) throw new Error('Failed to load profile data');
        //   return res.json();
        // }
      },
      {
        path: "settings",
        element: <Settings/>,
        requiresAuth: true,
        roles: ["admin"],
        // loader: async () => {
        //   const res = await fetch('/api/settings');
        //   if (!res.ok) throw new Error('Failed to load settings data');
        //   return res.json();
        // }
      },
    ],
  },
  {
    path: "*",
    element: <NotFound/>,
    requiresAuth: false,
  },
];

export default routes;
